<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        .form-readonly {
            background-color: #f8f9fa;
            cursor: not-allowed;
        }
        /* 添加动画效果 */
        .animate-scale {
            transition: transform 0.3s ease;
        }
        .animate-scale:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
<div class="container mx-auto px-4 py-12 flex justify-center">
    <div class="bg-white p-10 rounded-3xl shadow-2xl max-w-md w-full space-y-8 animate-fade-in">
        <h3 class="text-3xl font-bold text-gray-900 text-center mb-4">
            <i class="fa-solid fa-user-lines me-2 text-yellow-400"></i>用户详情
        </h3>
        <form th:action="@{/updateById}" method="post" class="space-y-6">
            <input type="hidden" name="id" th:value="${sysUser.id}">

            <div>
                <label for="account" class="block text-sm font-medium text-gray-700 mb-2">账号</label>
                <input type="text" name="account" th:value="${sysUser.account}" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:border-yellow-400 focus:ring-yellow-400 focus:outline-none transition duration-300" required>
            </div>

            <div>
                <label for="realName" class="block text-sm font-medium text-gray-700 mb-2">姓名</label>
                <input type="text" name="realName" th:value="${sysUser.realName}" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:border-yellow-400 focus:ring-yellow-400 focus:outline-none transition duration-300" required>
            </div>

            <div>
                <label for="sex" class="block text-sm font-medium text-gray-700 mb-2">性别</label>
                <select name="sex" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:border-yellow-400 focus:ring-yellow-400 focus:outline-none transition duration-300" required>
                    <option value="1" th:selected="${sysUser.sex == 1}">男</option>
                    <option value="2" th:selected="${sysUser.sex == 2}">女</option>
                    <option value="3" th:selected="${sysUser.sex == 3}">不详</option>
                </select>
            </div>

            <div>
                <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">手机号</label>
                <input type="text" name="phone" th:value="${sysUser.phone}" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:border-yellow-400 focus:ring-yellow-400 focus:outline-none transition duration-300" required>
            </div>

            <div class="space-y-4">
                <button type="submit" class="w-full bg-yellow-400 text-white py-3 rounded-md hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:ring-opacity-50 transition duration-300 animate-scale">
                    <i class="fa-solid fa-pencil me-2"></i>更新信息
                </button>
                <a th:href="@{/page}" class="block w-full text-center text-gray-700 border border-gray-300 py-3 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-50 transition duration-300 animate-scale">
                    <i class="fa-solid fa-arrow-left me-2"></i>返回列表
                </a>
            </div>
        </form>
    </div>
</div>
</body>
</html>
